import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { MusicPlay } from 'components/musicPlay';
import { callGetNewsApi } from 'utils/networking';
import { useSelector, useDispatch } from 'react-redux'

const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    left: 0,
    bottom: "10px",
    zIndex: 99,
    width: "100%",
    height: "55px",
    [theme.breakpoints.up('md')]: {
      height: "80px",
    },
  },
}));

const RootPlays = () => {

  const classes = useStyles();
  const dispatch = useDispatch();
  const [playlists, setPlaylists] = useState([]);

  const profileData = useSelector((state) => state.auth.profileData)
  const playList = useSelector((state) => state.playlist.playList)

  return (
    <div className={clsx(classes.root)}>
      <MusicPlay musicInfoList={playList} />
    </div>
  );
};

RootPlays.propTypes = {
  className: PropTypes.string,
  pages: PropTypes.object.isRequired,
};

export default RootPlays;
